<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.util.*" %>
<xn:title text="校内XNJS DOM演示" />

<br>
<br>
<h2>
XNJS DOM演示
</h2>
API文档见<a href="http://dev.xiaonei.com/wiki/XNJS#XNJS_DOM_--_.E6.A0.A1.E5.86.85.E6.96.87.E6.A1.A3.E5.AF.B9.E8.B1.A1.E6.A8.A1.E5.9E.8B">XNJS DOM -- 校内文档对象模型</a>

<hr>
<br>
<h4>
第一个演示：遍历DOM树的例子
</h4>
<p>
下面的例子计算了当前app页面中所有元素节点（ELEMENT_NODE）的个数。
</p>
<br>
<br>
<br>

<script type="text/javascript">
<!--
function countTags(node) {                       
    var numtags = 0;
    if (node.getNodeType() == 1 /*Node.ELEMENT_NODE*/) {
        numtags++;                            
    }
    var children = node.getChildNodes();              
    for(var i=0; i < children.length; i++) {  
        numtags += countTags(children[i]);    
    }
    return numtags;                           
}

function displayTagsCount() {
    var display = document.getElementById('tagcount_display');
    var tagsCount = countTags(document.getRootElement());
    display.setTextValue('共有 ' + tagsCount + ' 个元素节点');
}
//-->
</script>

<a href="#" onclick="displayTagsCount(); return false;">计算当前app页面中所有元素节点的个数</a>&nbsp;&nbsp;&nbsp;<span id="tagcount_display"></span>

<br>
<hr>
<br>
<h4>
第二个演示：修改DOM的例子
</h4>
<p>
下面的例子将段落一中的文字突出显示。
</p>
<br>
<br>
<br>

<script type="text/javascript">
<!--
function embolden(n) {
    if (typeof n == "string") n = document.getElementById(n); // Lookup node
    var b = document.createElement("b"); // Create a new <b> element
    var parent = n.getParentNode();           // Get the parent of the node
    parent.replaceChild(b, n);           // Replace the node with the <b> tag
    b.appendChild(n);                    // Make the node a child of the <b> element
}
//-->
</script>
<!-- A couple of sample paragraphs -->
<p id="p1">这里是第一个段落</p>
<p id="p2">这里是第二个段落</p>

<br>
<button onclick="embolden('p1');">突出显示段落一</button>

<br>
<hr>
<br>
<h4>
第三个演示：创建DOM节点的例子
</h4>
<p>
下面的例子创建一张表格，以嵌套方式显示一个JavaScript对象的各个属性。
</p>
<br>
<br>
<br>

<script type="text/javascript">
<!--
function makeTable(object, level) {
    // If we've reached maximum recursion, return a Text node instead.
    if (level > makeTable.maxRecursion) {
        var final_node = document.createElement('span');
        final_node.setTextValue('[Object]');
        return final_node;
    }

    // Create the table we'll be returning
    var table = document.createElement("table");
    table.setStyle({borderWidth: "1px", borderStyle: "solid"});

    // Add a Name|Type|Value header to the table
    var headerGroup = document.createElement("tbody");
    var header = document.createElement("tr");
    var headerName = document.createElement("th");
    var headerType = document.createElement("th");
    var headerValue = document.createElement("th");
    headerName.setStyle({borderWidth: "1px", borderStyle: "solid"});
    headerType.setStyle({borderWidth: "1px", borderStyle: "solid"});
    headerValue.setStyle({borderWidth: "1px", borderStyle: "solid"});
    var name_span = document.createElement("span");
    var type_span = document.createElement("span");
    var value_span = document.createElement("span");
    name_span.setStyle("margin", "5px");
    type_span.setStyle("margin", "5px");
    value_span.setStyle("margin", "5px");
    name_span.setTextValue("Name");
    type_span.setTextValue("Type");
    value_span.setTextValue("Value");
    headerName.appendChild(name_span);
    headerType.appendChild(type_span);
    headerValue.appendChild(value_span);
    headerGroup.appendChild(header);
    header.appendChild(headerName);
    header.appendChild(headerType);
    header.appendChild(headerValue);
    table.appendChild(headerGroup);

    // Get property names of the object and sort them alphabetically
    var names = [];
    for(var name in object) names.push(name);
    names.sort();

    // Now loop through those properties
    for(var i = 0; i < names.length; i++) {
        var name, value, type;
        name = names[i];
        try {
            value = object[name];
            type = typeof value;
        }
        catch(e) {
            value = "<unknown value>";
            type = "unknown";
        };

        // Never display function source code: it takes up too much room
        if (type == "function") value = "{/*source code suppressed*/}";

        // Create a table row to display property name, type and value
        var rowGroup = document.createElement("tbody");
        var row = document.createElement("tr");
        row.setStyle({borderWidth: "1px", borderStyle: "solid"});
        var rowName = document.createElement("td");
        var rowType = document.createElement("td");
        var rowValue = document.createElement("td");
        rowName.setStyle({borderWidth: "1px", borderStyle: "solid"});
        rowType.setStyle({borderWidth: "1px", borderStyle: "solid"});
        rowValue.setStyle({borderWidth: "1px", borderStyle: "solid"});
        name_span = document.createElement("span");
        type_span = document.createElement("span");
        name_span.setStyle("margin", "5px");
        type_span.setStyle("margin", "5px");
        name_span.setTextValue(name);
        type_span.setTextValue(type);
        rowName.appendChild(name_span);
        rowType.appendChild(type_span);

        // For objects, recurse to display them as tables
        if (type == "object") {
            rowValue.appendChild(makeTable(value, level+1));
        }
        else {
            value_span = document.createElement("span");
            value_span.setStyle("margin", "5px");
            value_span.setTextValue(value);
            rowValue.appendChild(value_span);
        }
        // Add the cells to the row, and add the row to the table
        row.appendChild(rowName);
        row.appendChild(rowType);
        row.appendChild(rowValue);

        rowGroup.appendChild(row);
        table.appendChild(rowGroup);
    }

    // Finally, return the table.
    return table;
}
makeTable.maxRecursion = 3; //最深递归层数

function displayTable(){
  var object = {
    x: 1,
    y: "string y",
    size: {
      zz: {a: 88, func: function(){return a;}},
      width: 40,
      height: 50
    }
  };
  
  document.getElementById("table_display").appendChild(makeTable(object, 0));
}
//-->
</script>

<pre>
  var object = {
    x: 1,
    y: "string y",
    size: {
      zz: {a: 88, func: function(){return a;}},
      width: 40,
      height: 50
    }
  };
</pre>

<p>
<a href="#" onclick="displayTable(); return false;">为上面定义的object对象生成显示表格</a>
</p>
<br>
<br>
<div id="table_display"></div>
